*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
html{
    font-size: 10px;
}
#box{
    font-size: 2rem;
    width: 500px;
    height: 500px;
    margin: 20px auto;
    //border: 1px solid blue;
    position: relative;
    text-align: center;
    line-height: 100px;
    #center{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #F05F2A;
        position: absolute;
        top: 200px;
        left: 200px;
        z-index: 10;
        transition: 1s;
        &:hover{
            background: purple;
            cursor: pointer;
            transform: rotate(720deg);
        }
    }
    ul{
        li{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            transition: 1s;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        li:nth-of-type(1){
            background: orange;
            z-index: 9;
        }
        li:nth-of-type(2){
            background: yellow;
            z-index: 8;
        }
        li:nth-of-type(3){
            background: green;
            z-index: 7;
        }
        li:nth-of-type(4){
            background: greenyellow;
            z-index: 6;
        }
        li:nth-of-type(5){
            background: blue;
            z-index: 5;
        }
        li:nth-of-type(6){
            background: #a179f3;
            z-index: 5;
        }
        li:nth-of-type(7){
            background: paleturquoise;
            z-index: 5;
        }
        li:nth-of-type(8){
            background: goldenrod;
            z-index: 5;
        }
        li:nth-of-type(9){
            background: #43d8ee;
            z-index: 5;
        }
        li:nth-of-type(10){
            background: #29f214;
            z-index: 5;
        }
        
    }
}
